<html>
<wicket:extend>

<script>
$(function(){			

	// Slider for Air
	$('#sliderAir').slider({
		orientation: "vertical",
		range: "min",
		min: 45,
		max: 85,
		value: 73,
		slide: function( event, ui ) {
			$( "#amountAir" ).html( ui.value + "&deg;F" );
		}
	});
	$( "#amountAir" ).html( $( "#sliderAir" ).slider( "value" ) + "&deg;F"  );

	// Slider for Water
	$('#sliderWater').slider({
		orientation: "vertical",
		range: "min",
		min: 45,
		max: 85,
		value: 60,
		slide: function( event, ui ) {
			$( "#amountWater" ).html( ui.value + "&deg;F"  );
		}
	});
	$( "#amountWater" ).html( $( "#sliderWater" ).slider( "value" ) + "&deg;F"  );
	
});
</script>

<div class="top-links">

  <a class="green-button" href="#">Aquaponics Main</a>
  <a wicket:id="statsButton" class="gray-button" href="#">Aquaponics Statistics</a>
  
  <a class="icon-right" href="#" onClick="helpPopUp();return false;"><img wicket:id="help" /></a>
  <a class="icon-right" href="#" onClick="window.location.reload();return false;"><img wicket:id="refresh" /></a>
  <a class="icon-right" href="#" onClick="window.print();return false;"><img wicket:id="printer" /></a>
  <div class="clear"></div>
</div>

<h1>Aquaponics</h1>

<!-- FIRST COLUMN -->

<div class="column-two">
  <div class="inner">
	<div class="box-inners" style="background-color:#F0F0F0;">  	
  					
	  
	  <h2>Status</h2>
	  
	  <div class="right" style="margin-right:10px;">
  		<div class="status-bar-med right" style="margin-top:-10px;">35gal (35%)&nbsp;&nbsp;</div>
      <div class="clear"></div>
      <div class="right" style="font-weight:bold;margin:1px 0 10px 0;">Water Tank Reserves</div>
    </div>
	  <div class="clear"></div>
	  
	  <!-- ONE ROW OF STATUS BOXES -->
	  <div class="column-two">
  		<div class="inner">
  			<div class="box" style="background-color:green;">
  			  <h4 style="color:white;">Current Temp</h4>
  			  
  			  <div class="box" style="padding-bottom:0;">
	  			  <div class="column-three">
		  			
		  			  	<h4>Air:</h4>
		  			  	<h4>H<sub>2</sub>O:</h4>
		  			
	  			  </div>
	  			  
	  			  <div class="column-three-two">
		  			  
		  			  	<h4>72&deg; F</h4>
		  			  	<h4>60&deg; F</h4>
		  			  
	  			  </div>
  			  	<div class="clear"></div>  			  	  
  			  </div>  			  
  			</div> 	  
  		</div>
	  </div>
	  
	  <div class="column-two">
  		<div class="inner">
  			<div class="box">
  			  <h5>Recommended Temp</h5>
  			  
  			  <div class="box" style="padding-bottom:0;">
	  			  <div class="column-three">
		  			
		  			  	<h5>Air:</h5>
		  			  	<h5>H<sub>2</sub>O:</h5>
		  			
	  			  </div>
	  			  
	  			  <div class="column-three-two">
		  			  
		  			  	<h5 style="padding-left:10px;">70&deg;F - 77&deg;F</h5>
		  			  	<h5 style="padding-left:10px;">55&deg;F - 65&deg;F</h5>
		  			  
	  			  </div>
  			  	  <div class="clear"></div>  			  	  
  			  </div>  			  
  			</div> 	  
  		</div>
	  </div>
	  <div class="clear"></div>
      <!-- END ONE ROW OF STATUS BOXES -->
    
      <!-- ONE ROW OF STATUS BOXES -->
	  <div class="column-two">
  		<div class="inner">
  			<div class="box" style="background-color:red;">
  			  <h4 style="color:white;">Current pH</h4>
  			  
  			  <div class="box">
	  			  <h4 style="text-align:center">5.5 <span style="color:red;">(ALERT)</span></h4>  			  	  
  			  </div>  			  
  			</div> 	  
  		</div>
	  </div>
	  
	  <div class="column-two">
  		<div class="inner">
  			<div class="box">
  			  <h5>Recommended pH</h5>
  			  
  			  <div class="box">
	  			  <h4 style="text-align:center">6.5.- 7.0</h4>  			  	  
  			  </div> 			  
  			</div> 	  
  		</div>
	  </div>
	  <div class="clear"></div>
      <!-- END ONE ROW OF STATUS BOXES -->
    
      <!-- ONE ROW OF STATUS BOXES -->
	  <div class="column-two">
  		<div class="inner">
  			<div class="box" style="background-color:#FF9900;">
  			  <h4 style="color:white;">Electrical Conductivity (EC)</h4>
  			  
  			  <div class="box">
	  			  <h4 style="text-align:center">2.3 <span style="color:#FF6600;">(WARNG)</span></h4>  			  	  
  			  </div>  			  
  			</div> 	  
  		</div>
	  </div>
	  
	  <div class="column-two">
  		<div class="inner">
  			<div class="box">
  			  <h5>Recommended EC</h5>
  			  
  			  <div class="box">
	  			  <h4 style="text-align:center">1.75 - 2.25</h4>  			  	  
  			  </div> 			  
  			</div> 	  
  		</div>
	  </div>
	  <div class="clear"></div>
      <!-- END ONE ROW OF STATUS BOXES -->
    
    
    </div>
  </div>
</div>
<!-- END FIRST COLUMN -->


<!-- SECOND COLUMN -->
<div class="column-two">
  
  	  <div class="column-three">
  			<div class="inner">
          <div class="box-inners">
            
            <h2>Temp Control</h2>	
          
            <!-- Air TEMP -->  			
            <div class="column-two">
              <div class="inner">
                <div class="box" style="text-align:center;padding:20px 0;">
                  <h6 style="text-align:center">Air</h6>
                  <div style="margin:auto;" id="sliderAir"></div>
                  <div class="clear"></div>
                  
                  <div id="amountAir" class="dark-purple" style="text-align:center;margin-top:10px;font-weight:bold;">76&deg;F</div>
                   
                </div>
              </div>  			  	
            </div>
            
            <!-- Water TEMP -->
            <div class="column-two">
              <div class="inner">
                <div class="box" style="text-align:center;padding:20px 0;">
                  <h6 style="text-align:center">Water</h6>
                  <div style="margin:auto;" id="sliderWater"></div>
                  <div class="clear"></div>
                  
                  <div id="amountWater" class="dark-purple" style="text-align:center;margin-top:10px;font-weight:bold;">60&deg;F</div>
                  
                </div>
              </div>
            </div>
          
            
            <div class="clear"></div>
          </div> 	  
				</div>
	  </div>
  					
	  <div class="column-three-two">
  		<div class="inner">
    		<div class="tab-wrapper" id="tabset-2">
		      <ul class="tabs">
		        <li class="tab-1"><a href="#">Current Status</a></li>
		        <li class="tab-2"><a href="#">Week</a></li>
		        <li class="tab-3"><a href="#">Month</a></li>
		        <li class="tab-4"><a href="#">Year</a></li>
		      </ul>
		      <ul class="tab-content">
		        <li class="content-1">
		          <h5>Current Water Quality</h5>
		          <img wicket:id="graphImage"/>
		          <div class="clear"></div>
		        </li>
		        <li class="content-2">
				  <h5>Water Quality (Week)</h5>
		          <p>
		          <img wicket:id="graphImage"/>
		          </p>		        </li>
		        <li class="content-3">
		          <h5>Water Quality (Month)</h5><p>[Similar data to Week and Current Status Tabs]<br /><br /><br /><br /><br /></p>
		        </li>
		        <li class="content-4">
		          <h5>Water Quality (Year)</h5><p>[Similar data to Week and Current Status Tabs]<br /><br /><br /><br /><br /></p>
		        </li>
		      </ul>
		      <div class="clear"></div>
		    </div>
		  </div>
		</div>		
		
		<div class="clear"></div>					
</div>		

<div class="column-two">			
		<!-- System Log -->	
  <div class="inner">		
    <div class="box">
      <h3>Aquaponics Status Messages</h3>
      <form action="#" class="table-wrapper" method="get" name="tableform">
        <p class="show-count">
          Show&nbsp;
          <select>
            <option>10</option>
            <option>20</option>
            <option>30</option>
            <option>40</option>
          </select>
          &nbsp;Entries
        </p>
        <p class="showing">Showing 1 - 3 of 567 entries</p>
        <table cellpadding="0" cellspacing="0" class="sortable" width="100%">
          <thead>
            <tr>
              <th>When?<a class="sort-desc" href="#">&nbsp;</a></th>
              <th>What?<a class="sort-desc" href="#">&nbsp;</a></th>
              <th>Actions<a class="sort-desc" href="#">&nbsp;</a></th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th>When?</th>
              <th>What?</th>
              <th>Actions</th>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td>Today @ 3:33pm</td>
              <td>Floating Fish Detected</td>
              <td>
                Remove carcasses
              </td>
            </tr>
            <tr>
              <td>Today @ 1:00pm</td>
              <td>Nitrate Levels <span style="color:red; font-weight: bold;">HIGH</span></td>
              <td>
                add 20gal fresh water
              </td>
            </tr>
            <tr>
              <td>Today @ 9:00am</td>
              <td>pH <span style="color:red; font-weight: bold;">LOW</span></td>
              <td>
                Add 10mL pH+
              </td>
            </tr>
          </tbody>
        </table>
        <p class="pagination">
          <a class="previous" href="#">&nbsp;</a>
          <span class="current">1</span>
          <a href="#">2</a>
          <a href="#">3</a>
          <a href="#">4</a>
          <a href="#">5</a>
          <a class="next" href="#">&nbsp;</a>
        </p>
        <p class="showing">Showing 1 - 3 of 567 entries</p>
        <div class="clear"></div>
      </form>
    </div>
  </div>
  <div class="clear"></div>
</div>
<!-- END SECOND COLUMN -->

</wicket:extend>
</html>

